<template>
  <div style="padding: 20px">
    <el-form
      ref="form"
      :model="employeeDetail"
      label-width="220px"
      :rules="rules"
    >
      <el-form-item label="姓名" prop="username">
        <el-input v-model="employeeDetail.username" size="mini" />
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input v-model="employeeDetail.workNumber" size="mini" disabled />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input
          v-model="employeeDetail.mobile"
          :disabled="!employeeDetail.workNumber === ''"
          size="mini"
        />
      </el-form-item>
      <el-form-item label="部门" prop="departmentId">
        <SelectTree :department-id.sync="employeeDetail.departmentId" />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select
          v-model="employeeDetail.formOfEmployment"
          placeholder="请选择"
          size="mini"
        >
          <el-option label="正式" :value="1" />
          <el-option label="非正式" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker
          v-model="employeeDetail.timeOfEntry"
          type="date"
          placeholder="选择日期"
          format="yyyy年MM月dd日"
          value-format="yyyy-MM-dd"
          size="mini"
        />
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker
          v-model="employeeDetail.correctionTime"
          type="date"
          placeholder="选择日期"
          format="yyyy年MM月dd日"
          value-format="yyyy-MM-dd"
          size="mini"
        />
      </el-form-item>
      <el-form-item label="员工头像" prop="staffPhoto" style="height: 193px">
        <!--  <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          action="#"
          :http-request="uploadImg"
        >
          <img
            v-if="employeeDetail.staffPhoto"
            :src="employeeDetail.staffPhoto"
            class="avatar"
          >
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload> -->
        <UploadImg :staff-photo.sync="employeeDetail.staffPhoto" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          :loading="loading"
          @click="onSubmit"
        >保存更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getEmployeeDetailRequest,
  updateEmployeeRequest,
  addEmployeeRequest
} from '@/api/employee'
import SelectTree from '../components/selectTree.vue'
import UploadImg from '../components/uploadImg.vue'

export default {
  name: 'DetailCom',
  components: {
    SelectTree,
    UploadImg
  },
  data() {
    const validateCorrectionTime = (_, value, callback) => {
      const date = new Date(value).getTime()
      if (date < new Date(this.employeeDetail.timeOfEntry).getTime()) {
        return callback(new Error('转正时间不能小于入职时间'))
      }
      callback()
    }
    return {
      options: [],
      employeeDetail: {
        formOfEmployment: null,
        timeOfEntry: '',
        correctionTime: '',
        mobile: '',
        workNumber: '',
        username: '',
        departmentId: null,
        staffPhoto: ''
      },
      loading: false,
      rules: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '手机号格式不正确'
          }
        ],
        departmentId: [
          { required: true, message: '请选择部门', trigger: 'blur' }
        ],
        formOfEmployment: [
          { required: true, message: '请选择聘用形式', trigger: 'blur' }
        ],
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: 'blur' }
        ],
        correctionTime: [
          { required: true, message: '请选择转正时间', trigger: 'blur' },
          { validator: validateCorrectionTime, trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    if (this.$route.params.id) {
      await this.getEmployeeDetail()
    }
  },
  methods: {
    // 获取员工详情
    async getEmployeeDetail() {
      const res = await getEmployeeDetailRequest(this.$route.params.id)
      this.employeeDetail = res.data
    },

    // 提交表单
    async onSubmit() {
      this.$refs.form.validate(async(valid) => {
        if (valid && !this.loading) {
          this.loading = true
          try {
            if (this.employeeDetail.id) {
              const res = await updateEmployeeRequest(this.employeeDetail)
              this.loading = false
              this.$message.success(res.message)
              this.$router.push('/employee')
            } else {
              const res = await addEmployeeRequest(this.employeeDetail)
              this.$message.success(res.message)
              this.$router.push('/employee')
            }
          } catch (err) {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>
<style lang='scss'  scoped>
  :deep(.el-input__inner) {
    width: 300px;
  }

</style>
